<template>
	<div style="height: 100vh;width: 100vw;">
		<div style="height: 5vw;"></div>
		<div
			style="width: 90vw;margin: 0 auto;background-color: #eee;border-radius: 4vw;overflow: hidden;display: flex;height: 6vh;align-items: center;justify-content: space-between;">
			<div style="width: 20vw;height: 10vw;">
				<select v-model="value" @change="clearKeyword()"
					style="height: 100%;width: 60%;background: transparent;border: none;margin-left: 3vw;">
					<option value="歌手">歌手</option>
					<option value="歌名">歌名</option>
					<option value="歌词">歌词</option>
				</select>
			</div>
			<input type="text" placeholder="请输入搜索内容" v-model="keyword" @keydown="handleEnter" />
			<div style="height: 5vh;display: flex;align-items: center;margin-right:3vw;" @click="submit()">搜索</div>

		</div>
		<div v-if="isJia">
			<uv-loading-icon color="#00aaff"></uv-loading-icon>
		</div>
		
		<div style="padding: 3vw;">
			<h3>猜你想搜</h3>
			<div style="padding: 3vw;display: flex;justify-content:space-evenly;flex-wrap: wrap;">
				<div style="background-color: #eee;text-align: center;padding: 3vw;margin-top:1vw;">
					稻香
				</div>
				<div style="background-color: #eee;text-align: center;padding: 3vw;margin-top:1vw;">
					奇迹再现
				</div>
				<div style="background-color: #eee;text-align: center;padding: 3vw;margin-top:1vw;">
					北京欢迎你
				</div>
				<div style="background-color: #eee;text-align: center;padding: 3vw;margin-top:1vw;">
					好运来
				</div>
				<div style="background-color: #eee;text-align: center;padding: 3vw;margin-top:1vw;">
					义勇军进行曲
				</div>
				<div style="background-color: #eee;text-align: center;padding: 3vw;margin-top:1vw;">
					军中绿花
				</div>
			</div>
		</div>
		<div
			style="background-image: url(/static/kugouimg.png);width: 100vw;height:40vh;background-repeat: no-repeat;background-size: cover;background-position: center;">
			<!-- <img src="/static/kugouimg.png" style="width: 100vw;" /> -->
			<div>
				<div style="text-align: center;" id="text">搜索列表为空</div>
			</div>

			<div v-for="item in showList" :key="item.id">
				<h3 @click="TuiSearch(item)">{{item.name}}</h3>
			</div>
		</div>
		<uv-toast ref="toast"></uv-toast>
	</div>

</template>
<script setup>
	import {
		onUpdated
	} from 'vue';
	import {
		ref
	} from 'vue';
	onUpdated(() => {
		console.log(value.value);
		
	})
	let keyword = ref("")
	let isJia = ref(false)
	let status = ref("")
	let clearKeyword=()=>{
		keyword.value=""
		showList.value=[]
		document.querySelector("#text").innerHTML = `搜索列表为空`
	}
	let submit = () => {
		document.querySelector("#text").innerHTML = `加载中`
		setInterval(() => {
			isJia.value = false
			if (showList.value.length > 0) {
				document.querySelector("#text").innerHTML = `为您找到这些内容`
			} else {
				document.querySelector("#text").innerHTML = `搜索列表为空`
			}
		}, 500)
			
	
		if (value.value == "歌名") {
			if (keyword.value.trim() == "") {
				console.log(typeof(keyword.value));
				showToast({
					type: 'default',
					title: '默认主题',
					message: "请输入搜索内容"
				})
			} else {
				isJia.value = true
				showList.value = list.value.filter(item => {
					return item.name.includes(keyword.value)
				})
			}
		}
		if (value.value == "歌手") {
			if (keyword.value.trim() == "") {
				console.log(typeof(keyword.value));
				showToast({
					type: 'default',
					title: '默认主题',
					message: "请输入搜索内容"
				})
			} else {
				isJia.value = true
				showList.value = list.value.filter(item => {
					return item.singer.includes(keyword.value)
				})
			}

		}

	}

	let handleEnter = (e) => {
		if (e.key == "Enter") {
			submit()
		}
	}
	let TuiSearch=(item)=>{
		value.value=item.name
		submit()
	}
	let value = ref("歌手")
	let range = [{
			value: "歌手",
			text: "歌手"
		},
		{
			value: "歌名",
			text: "歌名"
		},
		{
			value: "歌词",
			text: "歌词"
		}
	];
	let popularlist = [

	]
	const toast = ref(null);
	let showToast = (params) => {
		toast.value.show({
			...params,
			complete() {
				params.url && uni.navigateTo({
					url: params.url
				})
			}
		})
	}
	let showList = ref([

	])
	let list = ref([{
			id: 1,
			name: "稻香",
			singer: "周杰伦"
		},
		{
			id: 2,
			name: "好运来",
			singer: "未知"
		},
		{
			id: 3,
			name: "奇迹再现",
			singer: "迪迦"
		},
		{
			id: 5,
			name: "海阔天空",
			singer: "1"
		},
		{
			id: 6,
			name: "北京欢迎你",
			singer: "2"
		},
	])
</script>

<style>

</style>